<template>
  <a-form :model="formState" ref="formRef" layout="vertical">
    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item label="角色名称" name="name" :rules="[{ required: true, message: '请输入角色名称' }]">
          <a-input v-model:value="formState.name" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="显示名称" name="displayName" :rules="[{ required: true, message: '请输入显示名称' }]">
          <a-input v-model:value="formState.displayName" />
        </a-form-item>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item label="公开角色">
          <a-switch v-model:checked="formState.isPublic" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="系统角色">
          <a-switch v-model:checked="formState.isStatic" />
        </a-form-item>
      </a-col>
    </a-row>

        <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item label="默认角色">
      <a-switch v-model:checked="formState.isDefault" />
    </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="启用">
          <a-switch v-model:checked="formState.enabled" />
        </a-form-item>
      </a-col>
    </a-row>

  
  </a-form>
</template>

<script setup lang="ts">
import { RoleApi } from '@/api/services/index';
import { GetIdInput, QueryApiBaseResultDto, UpdateRoleInput} from '@/api/services/types';
import { FormInstance, message } from 'ant-design-vue';
import { computed, ref, watch } from 'vue';

const formRef = ref<FormInstance>();

const props = defineProps<{
  id?: string;
}>();
const isEdit = computed(() => {
  if (props.id) {
    return true;
  }
  return false;
})
const formState = ref<UpdateRoleInput>({
  name: '',
  displayName: '',
  isDefault: false,
  isStatic: false,
  isPublic: false,
  id: '',
  readOnly: false,
  enabled: true
});

const loadData = (id: string) => {
  const input: GetIdInput = {
    id: id,
    readOnly: false
  }
  RoleApi.get(input).then(res => {
    const { code, data, msg } = res;
    if (code == 0) {
      formState.value = Object.assign({}, formState.value, data);
    } else {
      message.error(msg)
    }
  })
};

watch(() => props.id, (newId) => {
  if (newId) {
    loadData(newId);
  } else {
    Object.assign(formState, {
      name: '',
      displayName: '',
      contractName: '',
      contractPhone: '',
      enabled: true
    });
  }
}, { immediate: true });

const submit = function (): Promise<QueryApiBaseResultDto<boolean>> {
  return new Promise((resolve, reject) => {
    formRef.value?.validate().then(() => {
         const input = Object.assign(formState.value, { id: props.id })
      const request = isEdit.value ? RoleApi.update(input) : RoleApi.create(input);
      request.then(res => {
        resolve(res);
      }).catch(err => {
        console.error(err)
        reject({
          data: false,
          code: 1,
          msg: '网络错误'
        })
      })
    }).catch((err) => {
      reject({
        data: false,
        code: 2,
        msg: err.errorFields[0].errors[0]
      })
    })
  })


};

defineExpose({
  submit
});
</script>
